<!-- Comp -->
<div class="io-dataGrid">
    {{#if gridData.rows.length <= 0}}
    <!-- 无数据 -->
    <div class="empty">
        <!-- <p class="face">:(</p> -->
        <i class="material-icons">{{{'&#xE813;'}}}</i>
        <h3>暂无数据</h3>
        <p>
            您可以更换查询条件，或者尝试如下操作：
        </p>
        <div class="ctrl">
            <a href="javascript://" class="btn" on-click="getData(1)"><i class="material-icons">{{{'&#xe5d5;'}}}</i>刷新一下</a>
        </div>
    </div>
    {{else}}
    <!-- 有数据 -->
    <div class="listWrap {{viewType == 1 || selectSingle ? 'nohead' : ''}}">
        <div class="listHead">
            <a href="javascript://" class="btn btn-link" on-click="toggle('allChecked')">
                {{#if allChecked}}
                <i class="material-icons">{{{'&#xe86c;'}}}</i>
                {{else}}
                <i class="material-icons">{{{'&#xe40c;'}}}</i>
                {{/if}}
                {{#if gridChecked.length <= 0 }}
                全选
                {{else}}
                已选中{{gridChecked.length}}个
                {{/if}}
            </a>
        </div>
        <div class="listBody" on-scroll="fixTableHead()">
            {{#if viewType == 1}}
            <!-- 列表视图 -->
            <div class="tableHead">
                <table class="tableList">
                    <thead>
                        <tr>
                            <th width="20" style="padding-left: 20px;">
                                {{#if selectSingle}}
                                <!-- 单选模式：不提供全选checkbox -->
                                {{else}}
                                <!-- 多选模式 -->
                                <!-- <input type="checkbox" model="allChecked"> -->
                                <span class="check" on-click="toggle('allChecked')">
                                    {{#if allChecked}}
                                    <i class="material-icons" style="color: #57da57;">{{{'&#xe86c;'}}}</i>
                                    {{else}}
                                    <i class="material-icons">{{{'&#xe40c;'}}}</i>
                                    {{/if}}
                                </span>
                                {{/if}}
                            </th>
                            {{#each tableCols:index}}
                            <th style="width: {{this.width}}">{{this.name}}</th>
                            {{/each}}
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tableBody">
                {{> tableTpl}}
                <table class="tableList">
                    <thead>
                        <tr>
                            <th width="20" style="padding-left: 20px;"></th>
                            {{#each tableCols:index}}
                            <th style="width: {{this.width}}">{{this.name}}</th>
                            {{/each}}
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each gridData.rows:index}}
                        <tr class="{{checked ? 'checked' : ''}}" on-click="select(index)" on-mouseover="trOver(index)">
                            <td width="20" style="padding-left: 20px;">
                                <span class="check">
                                    {{#if checked}}
                                    <i class="material-icons">{{{'&#xe86c;'}}}</i>
                                    {{else}}
                                    <i class="material-icons">{{{'&#xe40c;'}}}</i>
                                    {{/if}}
                                </span>
                            </td>
                            {{#each tableCols:index2}}
                            <td style="width: {{this.width}}">
                                {{#if index2 == 0}}
                                    <a href="javascript://" on-click="fire('view', {id: gridData.rows[index].id, name: gridData.rows[index].name})">
                                    {{#if formatter}}
                                        {{ formatter(gridData.rows[index][key]) }}
                                    {{else}}
                                        {{gridData.rows[index][key]}}
                                    {{/if}}
                                    </a>
                                {{else}}
                                    {{#if formatter}}
                                        {{ formatter(gridData.rows[index][key]) }}
                                    {{else}}
                                        {{gridData.rows[index][key]}}
                                    {{/if}}
                                {{/if}}
                            </td>
                            {{/each}}
                            <td></td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
            {{else viewType ==2}}
            <!-- 卡片视图 -->
            <div class="cardList {{cardBlock ? 'block' : ''}}">
                {{#each gridData.rows:index}}
                <div class="item {{checked ? 'checked' : 'nochecked'}}">
                    {{> cardTpl}}
                    <span class="check" on-click="select(index)">
                        {{#if checked}}
                        <i class="material-icons">{{{'&#xe86c;'}}}</i>
                        {{else}}
                        <i class="material-icons">{{{'&#xe86c;'}}}</i>
                        {{/if}}
                    </span>
                </div>
                {{/each}}
            </div>
            {{/if}}
        </div>
        <div class="listFoot">
            {{#if pageType == 1}}
            <!-- 经典翻页 -->
            <div class="fl">
                {{#if !pageMini}}
                每页
                <select class="pageSize" model="defaultParam.pageSize">
                    <option value="10">10</option>
                    <option value="30">20</option>
                    <option value="30">30</option>
                </select>
                条，
                {{/if}}
                共 <strong>{{gridData.total}}</strong> 条记录
            </div>
            <div class="fr">
                {{#if !pageMini}}
                当前第 <strong>{{states.curPage}}</strong> 页，
                {{/if}}
                共 <strong>{{gridData.totalPage}}</strong> 页
            </div>

            <div class="center">
                <a href="javascript://" class="btn btn-mini btn-link" on-click="pagePrev()"><i class="material-icons">{{{'&#xE045;'}}}</i>上一页</a>
                <span class="label label-blue">{{states.curPage}}</span>
                <a href="javascript://" class="btn btn-mini btn-link" on-click="pageNext()"><i class="material-icons">{{{'&#xE044;'}}}</i>下一页</a>
            </div>
            {{else if pageType == 2}}
            <!-- 无限加载 -->
            <div class="fl">
                当前加载 <strong>{{gridData.rows.length}}</strong> 条，共 <strong>{{gridData.total}}</strong> 条记录
            </div>
            <div class="fr">已加载 <strong>{{states.curPage}}</strong> 页，共 <strong>{{gridData.totalPage}}</strong> 页</div>
            
            <div class="center">
                {{#if states.curPage < gridData.totalPage}}
                <a href="javascript://" on-click="pageNext()"><i class="material-icons">{{{'&#xE5D5;'}}}</i>加载更多</a>
                {{else}}
                <span class="nomore">没有更多了</span>
                {{/if}}
            </div>
            {{/if}}
        </div>
    </div>
    {{/if}}
</div>